<template>
  <main>
    <div class="selectors">
      <selector :value="size" @input="changeSize" :options="sizeOptions"></selector>
      <selector v-model="base" :options="baseOptions"></selector>
    </div>
    <section>
      <div class="list" v-if="mouseOrgan && mouseOrgan.holes" :style="{ transform: `scale(${12/this.size})`}">
        <div class="hole" v-ripple v-for="(hole, holeIndex) in mouseOrgan.holes" :key="holeIndex" :data-sort="hole.sort + 1">
          <div class="tone" 
            v-for="(action, actionIndex) in hole.actions" :class="getClass(action)"
            :key="`tone-${actionIndex}`">{{ action.tone.getDetail(base).number }}</div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import selector from './selector'
import { Ripple } from 'quasar'
import MouseOrgan from './MouseOrgan.js'

export default {
  components: { selector },
  directives: { Ripple },
  data () {
    return {
      base: 0,
      size: 12,
      mouseOrgan: null,
      baseOptions: [],
      sizeOptions: [ { label: `12孔`, value: 12 }, { label: `14孔`, value: 14 }, { label: `16孔`, value: 16 }, ]
    }
  },
  created () {
    this.mouseOrgan = new MouseOrgan(this.size)
    const list = [ 'C', '#C', 'D', '#D', 'E', 'F', '#F', 'G', '#G', 'A', '#A', 'B' ]
    this.baseOptions = list.map((item, index) => ({ label: `1 = ${item}`, value: index }))
  },
  methods: {
    changeSize (size) {
      this.size = size
      this.mouseOrgan = new MouseOrgan(size)
    },
    getClass (action) {
      return {
        isGood: action.tone.getDetail(this.base).isGood,
        isPress: action.isPress,
        isExhale: action.isExhale,
        isInhale: action.isInhale,
        low1: action.tone.getDetail(this.base).level === -1,
        low2: action.tone.getDetail(this.base).level <= -2,
        high1: action.tone.getDetail(this.base).level === 1,
        high2: action.tone.getDetail(this.base).level >= 2,
      }
    }
  }
}
</script>

<style scoped>
  section {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }
  .selectors {
    position: absolute;
    left: 10vw;
    top: 10vh;
    display: flex;
  }
  .list {
    border: 1px solid #ccc;
    padding: .5vw;
    display: flex;
    border-radius: .5vw;
  }
  .hole {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* padding: 2px; */
    border: 1px solid #aaa;
    margin: .5vw;
    height: 6vw;
    width: 6vw;
    position: relative;
    box-sizing: content-box;
  }
  .hole::before {
    content: attr(data-sort);
    position: absolute;
    bottom: -3vw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4vw;
  }
  .tone {
    height: 3vw;
    width: 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 0.05vw solid #ccc;
    opacity: 0.3;
    position: relative;
    background-color: rgb(0, 225, 255);
    cursor: default;
    transition: all 0.5s;
    font-size: 1.4vw;
  }
  .tone.isGood {
    font-size: 1.6vw;
    font-weight: bold;
    opacity: 1;
  }
  .tone.isPress {
    background-color: rgba(255, 0, 0, 0.5);
  }
  .tone.low1::before,
  .tone.low2::before,
  .tone.low1::after,
  .tone.low2::after,
  .tone.high1::before,
  .tone.high2::before,
  .tone.high1::after,
  .tone.high2::after {
    content: '.';
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: .25vw;
    transform: translateX(-50%);
    font-size: 1.2vw;
    font-weight: bold;
  }
  .tone.low2::after {
    bottom: -0.1vw;
  }
  .tone.high1::before,
  .tone.high2::before,
  .tone.high1::after,
  .tone.high2::after {
    top: -0.55vw;
  }
  .tone.high2::after {
    top: -0.85vw;
  }
</style>

